<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--{% load static %}-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>分词结果</title>-->
<!--    <style>-->
<!--        body {-->
<!--            font-family: Arial, sans-serif;-->
<!--            background-color: #e7f1ff; /* 背景颜色 */-->
<!--            color: #191970; /* 字体颜色 */-->
<!--            margin: 0;-->
<!--            padding: 20px;-->
<!--        }-->

<!--        h1 {-->
<!--            max-width: 100%; /* 最大宽度 */-->
<!--            text-align: center;-->
<!--            display: block; /* 块级元素 */-->
<!--            margin: auto; /* 自动边距用于居中 */-->
<!--            background-color: #e7f1ff; /* 背景颜色 */-->
<!--            color: #111; /* 更深的黑色 */-->
<!--            margin: 20px auto; /* 上下外边距 */-->
<!--            border-radius: 8px; /* 圆角效果 */-->
<!--            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--            margin: 20px 0; /* 适当的上下边距 */-->
<!--            padding: 20px; /* 内边距 */-->
<!--        }-->

<!--        main {-->
<!--            max-width: 950px; /* 最大宽度 */-->
<!--            display: block; /* 块级元素 */-->
<!--            margin: auto; /* 自动边距用于居中 */-->
<!--            background-color: white; /* 内容区域背景色 */-->
<!--            border-radius: 10px; /* 圆角效果 */-->
<!--            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--            padding: 20px; /* 内边距 */-->
<!--        }-->

<!--        h2 {-->
<!--            color: #191970; /* 二级标题颜色 */-->
<!--            border-bottom: 2px solid #ddd; /* 下边框 */-->
<!--            padding-bottom: 10px; /* 下边距 */-->
<!--            margin-top: 20px; /* 上边距 */-->
<!--        }-->

<!--        p {-->
<!--            font-size: 16px; /* 字体大小 */-->
<!--            line-height: 1.5; /* 行高 */-->
<!--            margin: 10px 0; /* 上下边距 */-->
<!--            color: #555; /* 段落文本颜色 */-->
<!--        }-->

<!--        table {-->
<!--            width: 100%; /* 表格宽度 */-->
<!--            border-collapse: collapse; /* 合并边框 */-->
<!--            margin: 20px 0; /* 上下外边距 */-->
<!--        }-->

<!--        th, td {-->
<!--            border: 1px solid #ddd; /* 单元格边框 */-->
<!--            padding: 10px; /* 内边距 */-->
<!--            text-align: left; /* 左对齐 */-->
<!--        }-->

<!--        th {-->
<!--            background-color: #f0f0f0; /* 表头背景颜色 */-->
<!--            color: #222; /* 表头字体颜色 */-->
<!--            font-weight: bold; /* 加粗 */-->
<!--        }-->

<!--        tr:nth-child(even) {-->
<!--            background-color: #fafafa; /* 隔行变色 */-->
<!--        }-->

<!--        img {-->
<!--            max-width: 100%; /* 最大宽度 */-->
<!--            display: block; /* 块级元素 */-->
<!--            background-color: #e7f1ff; /* 背景颜色 */-->
<!--            margin: 20px auto; /* 上下外边距 */-->
<!--            border-radius: 8px; /* 圆角效果 */-->
<!--            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--        }-->

<!--        a {-->
<!--            display: inline-block; /* 块级元素 */-->
<!--            margin: 20px 0; /* 上下外边距 */-->
<!--            padding: 10px 15px; /* 内边距 */-->
<!--            background-color: #191970; /* 按钮背景色 */-->
<!--            color: white; /* 按钮字体颜色 */-->
<!--            text-decoration: none; /* 去掉下划线 */-->
<!--            border-radius: 5px; /* 圆角效果 */-->
<!--            transition: background-color 0.3s, transform 0.2s; /* 背景色和缩放过渡 */-->
<!--            text-align: center; /* 文本居中 */-->
<!--        }-->

<!--        a:hover {-->
<!--            background-color: #007bff; /* 悬停效果 */-->
<!--            transform: scale(1.05); /* 悬停时放大 */-->
<!--        }-->

<!--        a:active {-->
<!--            transform: scale(0.95); /* 点击时缩小 */-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <h1>法律法规文本分词报告</h1>-->

<!--    <main>-->
<!--        <h2>原始文本</h2>-->
<!--        <p>{{ original_text }}</p>-->

<!--        <h2>分词结果</h2>-->
<!--        <p>{{ segmented_text }}</p>-->

<!--        <h2>词性标注</h2>-->
<!--        <p>{{ part_of_speech|safe }}</p>-->

<!--        <h2>词云图</h2>-->
<!--        <img src="{% static 'img/wordcloud.png' %}" class="wordcloud-img" alt="词云图">-->

<!--        <h2>词频统计</h2>-->
<!--        <ul>-->
<!--            {% for word, count in word_frequency.items %}-->
<!--                <li>{{ word }}: {{ count }}</li>-->
<!--            {% endfor %}-->
<!--        </ul>-->

<!--        <a href="{% url 'segment' %}">返回分词页面</a>-->
<!--    </main>-->
<!--</body>-->
<!--</html>-->



<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>分词结果</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #e7f1ff; /* 背景颜色 */
            color: #191970; /* 字体颜色 */
            margin: 0;
            padding: 20px;
        }

        h1 {
            max-width: 100%; /* 最大宽度 */
            text-align: center;
            display: block; /* 块级元素 */
            margin: auto; /* 自动边距用于居中 */
            background-color: #e7f1ff; /* 背景颜色 */
            color: #111; /* 更深的黑色 */
            margin: 20px auto; /* 上下外边距 */
            border-radius: 8px; /* 圆角效果 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            margin: 20px 0; /* 适当的上下边距 */
            padding: 20px; /* 内边距 */
        }

        main {
            max-width: 950px; /* 最大宽度 */
            display: block; /* 块级元素 */
            margin: auto; /* 自动边距用于居中 */
            background-color: white; /* 内容区域背景色 */
            border-radius: 10px; /* 圆角效果 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            padding: 20px; /* 内边距 */
        }

        h2 {
            color: #191970; /* 二级标题颜色 */
            border-bottom: 2px solid #ddd; /* 下边框 */
            padding-bottom: 10px; /* 下边距 */
            margin-top: 20px; /* 上边距 */
        }

        p {
            font-size: 16px; /* 字体大小 */
            line-height: 1.5; /* 行高 */
            margin: 10px 0; /* 上下边距 */
            color: #555; /* 段落文本颜色 */
        }

        .word {
            display: inline-block; /* 行内块元素 */
            margin: 5px; /* 每个词之间添加一点间距 */
            padding: 2px 6px; /* 内边距 */
            background-color: #f4f4f4; /* 背景色 */
            border-radius: 5px; /* 圆角效果 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            transition: background-color 0.3s ease, transform 0.2s; /* 动画效果 */
        }

        .word:hover {
            background-color: #b3d9ff; /* 悬停背景色 */
            transform: scale(1.1); /* 悬停时放大 */
        }


        table {
            width: 100%; /* 表格宽度 */
            border-collapse: collapse; /* 合并边框 */
            margin: 20px 0; /* 上下外边距 */

        }

        th, td {
            border: 1px solid #ddd; /* 单元格边框 */
            padding: 10px; /* 内边距 */
            text-align: center; /* 居中对齐 */
        }

        th {
            background-color: #f0f0f0; /* 表头背景颜色 */
            color: #222; /* 表头字体颜色 */
            font-weight: bold; /* 加粗 */
            text-align: center; /* 居中对齐 */
        }

        tr:nth-child(even) {
            background-color: #fafafa; /* 隔行变色 */
        }

        img {
            max-width: 100%; /* 最大宽度 */
            display: block; /* 块级元素 */
            background-color: #e7f1ff; /* 背景颜色 */
            margin: 20px auto; /* 上下外边距 */
            border-radius: 8px; /* 圆角效果 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        a {
            display: inline-block; /* 块级元素 */
            margin: 20px 0; /* 上下外边距 */
            padding: 10px 15px; /* 内边距 */
            background-color: #191970; /* 按钮背景色 */
            color: white; /* 按钮字体颜色 */
            text-decoration: none; /* 去掉下划线 */
            border-radius: 5px; /* 圆角效果 */
            transition: background-color 0.3s, transform 0.2s; /* 背景色和缩放过渡 */
            text-align: center; /* 文本居中 */
        }

        a:hover {
            background-color: #007bff; /* 悬停效果 */
            transform: scale(1.05); /* 悬停时放大 */
        }

        a:active {
            transform: scale(0.95); /* 点击时缩小 */
        }
    </style>
</head>
<body>
    <h1>法律法规文本词频分析报告</h1>

    <main>
        <h2>原始文本</h2>
        <p>{{ original_text }}</p>

        <h2>分词结果</h2>
        <p>
            {% for word in segmented_text %}
                <span class="word">{{ word }}</span>
            {% endfor %}
        </p>

        <h2>词云图</h2>
        <img src="{% static 'img/wordcloud.png' %}" class="wordcloud-img" alt="词云图">

        <h2>词频统计</h2>
        <table>
            <thead>
                <tr>
                    <th>词语</th>
                    <th>频率</th>
                </tr>
            </thead>
            <tbody>
                {% for word, count in word_frequency.items %}
                    <tr>
                        <td>{{ word }}</td>
                        <td>{{ count }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <a href="{% url 'segment' %}">返回分词页面</a>
    </main>
</body>
</html>
